<template>
	<view class="guess-item flex-column bgfff" @tap="navToDetailPage(item.productId)">
		<view class="image-wrapper"><image :src="item.productImage" mode="aspectFill"></image></view>
		<view class="shop flex-column-between">
			<text class="title font28 color333 show-two-text">{{ item.productName }}</text>
			<view class="flex-center-between">
				<text class="price font28">￥{{ item.price }}</text>
				<text class="pay font24 color888" >{{ item.sale | numFormat }}人付款</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			}
		},
		props: ['item']
	}
</script>

<style lang="scss">
.guess-item {
	width: 334rpx;
	height: 526rpx;
	margin-bottom: 24rpx;
	border-radius: 8rpx;
	&:nth-child(odd) {
		margin-right: 22rpx;
	}
	.image-wrapper {
		width: 100%;
		height: 334rpx;
		border-radius: 8rpx 8rpx 0 0;
		overflow: hidden;
		background-color: #fff;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	
	.shop {
		width: 100%;
		height: calc(100% - 334rpx);
		padding: 30rpx 20rpx;
		.title {
			letter-spacing: 1.4rpx;
			line-height: 40rpx;
		}
		.price {
			color: #FF1701;
		}
	}
}
</style>
